<template>
    <div class="predict-price-add">
        <van-cell-group>
            <van-field @click="dataset.show = true" label="选择分类" :placeholder="forma.placeholder" is-link disabled/>
            <div class="account">
                <div class="title">计算方式</div>
                <van-radio-group v-model="forma.radio">
                    <van-radio name="1" checked-color="#07c160">重量</van-radio>
                    <van-radio name="2" checked-color="#07c160">数量</van-radio>
                </van-radio-group>
            </div>
            <div class="weight van-hairline--top">
                <van-field label="" v-model="forma.number" placeholder="请输入数值"/>
                <div class="number">{{ forma.unit }}</div>
            </div>
        </van-cell-group>
        <van-button type="primary" @click="eventClickAddShopCartItem">立即添加</van-button>
        <van-popup v-model="dataset.show" position="bottom" :style="{ height: '80%' }" closeable>
            <div v-show="pga > 0" @click="eventGoBackOperate" class="goback-button">返回上一级</div>
            <van-list v-model="dataset.loading" :finished="dataset.finished" finished-text="没有更多了"
                      @load="controllerRequestOfferList">
                <dl class="offer-list-wrap" v-for="(item, index) in dataset.items" @click="eventClickSelectType(item.name,index)">
                    <dt class="title">
                        <p>{{ item.name }}</p>
                    </dt>
                    <dd class="unit">
                        <p><span>{{ item.price[0].weight }}kg</span><span>/元</span></p>
                        <p><span>{{ item.price[0].number }}个</span><span>/元</span></p>
                    </dd>
                    <dd class="button">
                        <img src="../../../static/images/folder.png"/>
                        <span @click.stop="pga = item.id">进入下级</span>
                    </dd>
                </dl>
            </van-list>
        </van-popup>
    </div>
</template>

<script>
    import {
        Cell, CellGroup,
        Field, Button, RadioGroup, Radio, Popup, List
    } from 'vant';

    export default {
        name: 'ShopOrderItemAddNormal',
        components: {
            [Field.name]: Field, [Button.name]: Button,
            [CellGroup.name]: CellGroup, [Cell.name]: Cell,
            [RadioGroup.name]: RadioGroup, [Radio.name]: Radio,
            [Popup.name]: Popup, [List.name]: List
        },
        data() {
            return {
                pga: 0, pgaList: [],
                forma: {
                    index: -1,
                    radio: '1', number: '',
                    unit: 'kg',
                    placeholder: '点击选择废品/垃圾分类'
                },
                dataset: {
                    show: false,
                    loading: true, finished: false,
                    page: 0, limit: 30, total: 0,
                    items: [],itemsData:[]
                }
            }
        },

        methods: {
            controllerRequestOfferList() {
                var url = '/api/home/garbage/getlist',
                    params = {
                        page: this.dataset.page,
                        list_rows: this.dataset.limit,
                        pga: 0
                    };

                if (this.pga > 0) params.pga = this.pga;

                this.$util.postRequestInterface(url, params, (res) => {
                    var result = [],
                    exportDataset = function (da) {
                        for (let x of da) {
                            result.push({
                                id: x.id,
                                idList: x.pgalist,
                                title: x.name,
                                pga: x.pga
                            });
                        }
                    };
                    exportDataset(res.data.data);
                    this.dataset.itemsData = result;
                    this.dataset.items = res.data.data;
                    if (this.dataset.items.length >= res.data.count) this.dataset.finished = true;
                    this.dataset.loading = false;
                });
            },
            eventClickSelectType(name,index){
                this.dataset.show = false;
                this.forma.placeholder = name;
                this.forma.index = index;
            },
            eventGoBackOperate() {
                this.pga = this.pgaList.pop() || 0;
            },
            eventClickAddShopCartItem() {
                if (!this.forma.number || this.forma.index == -1) {
                    this.$toast('请选择分类单位并填写');
                    return;
                };
                var index = this.forma.index,
                    item = this.dataset.itemsData[index];

                item.weight = (this.forma.radio == 1) ? this.forma.number : '';
                item.number = (this.forma.radio == 2) ? this.forma.number : '';

                if (this.$store.state.shop.operateMode == 'stock') {
                    var url = '/api/home/user/addStock',
                        params = {
                            u_id: '',
                            garbageid: item.idList,
                            weighting_num: item.weight || item.number,
                            weighting_method: item.weight ? 0 : 1,
                            token: this.$store.state.options.user.token
                        };
                    this.$util.postRequestInterface(url, params, (res) => {
                        this.$router.go(-1);
                    });
                } else {
                    // console.log(item);
                    this.$store.commit('shop/addShopCartsItem', item);
                    this.$router.go(-1);
                }
            },
        },
        watch: {
            pga(nVal, oVal) {
                // console.log(nVal, oVal);
                if (this.pgaList.indexOf(nVal) < 0 && nVal > 0) this.pgaList.push(nVal);
                // console.log(this.pgaList);
                this.dataset.page = 0;
                this.dataset.items = [];
                this.dataset.finished = false;
                this.dataset.loading = false;
                this.controllerRequestOfferList();
            },
            'forma.index'(nVal, oVal) {
                this.forma.placeholder = this.dataset.itemsData[nVal].title;
                this.dataset.show = false;
            },
            'dataset.show'(nVal, oVal) {
                if (nVal && this.dataset.page == 0) {
                    this.controllerRequestOfferList();
                }
            },
            'forma.radio'(nVal, oVal) {
                if (nVal == '1') {
                    this.forma.unit = 'kg';
                } else {
                    this.forma.unit = '个';
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .predict-price-add {
        .weight {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .number {
                margin-right: 1.5rem;
                color: #333333;
            }
        }

        .account {
            padding: 1.6rem 1.6rem;
            display: flex;
            /*border-bottom: 0.01rem solid #ebedf0;*/
            /*margin: 0 1rem;*/
        }

        .van-cell {
            padding: 1rem 1.6rem !important;
            display: flex;
        }

        .account .van-radio-group {
            display: flex;
            flex: 1;
            justify-content: center;

            .van-radio:last-child {
                margin-left: 4rem;
            }
        }

        .van-button {
            width: 100%;
            position: fixed;
            bottom: 0;
            background: #00CC00;
            font-size: 1.4rem;
        }

        .goback-button {
            background-color: #00CC00;
            padding: 1rem;
            color: #ffffff;
        }

        .offer-list-wrap {
            padding: 0rem 1rem;
            border-bottom: 0.4rem solid #F4F4F4;

            .title {
                padding: 1.6rem 0rem 1rem;
            }

            .unit {
                display: flex;

                p {
                    flex: 1;
                    font-size: 1.4rem;

                    span:first-child {
                        color: #FF0000;
                    }
                }

                p:last-child {
                    text-align: right;
                }
            }

            .button {
                text-align: right;
                font-size: 1.3rem;
                padding: 1.3rem 0rem;

                img {
                    width: 1.7rem;
                    vertical-align: middle;
                    margin-right: 0.5rem;
                }

                span {
                    position: relative;
                    top: 1.5px;
                }
            }
        }
    }
</style>
